<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handlerSearch" @reset="resetSearch" />

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableActionRef"
      :actionColumn="tableActionColumn"
      :scroll-x="920"
      bordered
    >
      <template #toolbar>
        <n-button type="primary" @click="handlerSearch">刷新数据</n-button>
      </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts" setup>
import { h, reactive, ref, onMounted } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { getOnlineUser, offlineUser } from "@/api/monitor/online";
import { PoweroffOutlined } from '@vicons/antd';
import { useUserStore } from "@/store/modules/user";
import { NButton } from "naive-ui";
import { useGlobSetting } from "@/hooks/setting";

const global = useGlobSetting()
const userStore = useUserStore()
const message = useMessage()
const dialog = useDialog()

const tableData = ref({
  records: [],
  total: 0
})
const initTableData = async () => {
  let params = {}
  if (searchForm.username) params['username'] = searchForm.username
  tableData.value = await getOnlineUser(params);
}

onMounted(async () => {
  await initTableData();
  reloadTable()
})

const schemas: FormSchema[] = [
  {
    field: 'name',
    labelMessage: '注意哦, 不是用户昵称',
    component: 'NInput',
    label: '用户名',
    componentProps: {
      placeholder: '输入用户名',
      onInput: (e: any) => {
        searchForm.username = e;
      },
    },
  },
];
// 按需搜索表单
const searchForm = reactive({
  username: null
})

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:3 2xl:4' },
  labelWidth: 85,
  schemas,
});

const handlerSearch = async () => {
  await initTableData()
  reloadTable()
}

const resetSearch = async () => {
  searchForm.username = null
  await initTableData()
  reloadTable()
}

// 表格数据
const columns = [
  {
    title: '用户名',
    key: 'username',
    fixed: 'left',
    width: 80,
    align: 'center',
  },
  {
    title: '会话编号',
    key: 'uid',
    width: 100,
    align: 'center',
  },
  {
    title: '主机',
    key: 'ip',
    width: 100,
    align: 'center',
  },
  {
    title: '登录地点',
    key: 'location',
    width: 120,
    align: 'center',
  },
  {
    title: '浏览器',
    key: 'browser',
    width: 80,
    align: 'center',
  },
  {
    title: '操作系统',
    key: 'os',
    width: 130,
    align: 'center',
  },
  {
    title: '登陆时间',
    key: 'loginTime',
    width: 160,
    align: 'center',
  },
];
const tableActionRef = ref();
const tableActionColumn = reactive({
  width: 100,
  title: '操作',
  key: 'action',
  fixed: 'right',
  align: 'center',
  render(row) {
    return h(TableAction, {
      style: 'text',
      actions: [
        {
          label: '下线',
          type: 'error',
          icon: PoweroffOutlined,
          onClick: () => {
            dialog.warning({
              title: '警告',
              content: '确定对该会话进行强制下线?',
              positiveText: '确定',
              negativeText: '取消',
              onPositiveClick: async () => {
                try {
                  await offlineUser({
                    username: row.username,
                    uid: row.uid
                  })
                  await initTableData()
                  reloadTable()
                } catch (e) {
                  dialog.destroyAll()
                }
              },
              onNegativeClick: () => { }
            })
          }
        },
      ],
    });
  }
});

const loadDataTable = async (res) => {
  const { current, size } = res
  let records = []
  for (let i = (current - 1) * size; i < current * size; i++) {
    if (i >= tableData.value.total) {
      break;
    }
    records.push(tableData.value.records[i]);
  }
  return {
    current,
    size,
    count: Math.ceil(tableData.value.total / size),
    records,
  };
};

function reloadTable() {
  tableActionRef.value.reload();
}

</script>

<style lang="less" scoped>
:deep(.my-icon .n-button__icon) {
  margin: 0 !important;
}
</style>
